<template>
    <div class="academic">
        <Title :title="title" :subtitle="subtitle" :moreUrl="'/science/all-resource'" />
        <div class="acdemic-content">
            <div class="academic-list">
                <div v-for="item in scienceData" :key="item.id" class="academic-card">
                    <div class="content">
                        <NuxtLink :to="localePath(`/science/all-resource/${item.id}`)">
                            <div class="img">
                                <img :src="fileBase + item.image" alt="">
                            </div>
                            <div class="info">
                                <p class="title">{{ item.title }}</p>
                                <div class="tags">
                                    <div v-for="tag in item.tags" class="label" :style="{
                                        border: `1px solid ${tag.color}`,
                                        color: tag.color
                                    }">
                                        {{ tag.name }}</div>
                                </div>
                                <div class="meta">
                                    <span class="date"><img src="/icon/index/icon1.png"
                                            alt='' />{{ formatDate(item.publishDate) }}</span>
                                    <!-- <span class="download" v-if="item.channel?.articleModel.code === 'kpzykj' || item.channel?.articleModel.code === 'kpzysp'"><img src="/icon/index/icon2.png" alt='' /> 已下载
                                        {{ item.downloads }} 次</span> -->
                                    <span class="download"><img src="/icon/detail/eye.png" alt='' /> 浏览
                                        {{ item.views }} 次</span>
                                </div>
                            </div>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Title from '@/components/index/Title.vue'
import { formatDate } from '@/utils/date'

const { $fetchGov } = useNuxtApp()
const localePath = useLocalePath()
const { fileBase } = useRuntimeConfig().public

const { data: science } = await useAsyncData(`science-${new Date().getTime()}`, () => {
    return $fetchGov('/app/api/channel/alias/science', {
        params: {
            isArticle: true,
            articleTotal: 4,
            _t: Date.now()
        }
    })
})

const title = computed(() => {
    return science.value?.data?.name || '';
});

const subtitle = 'Science popularization resources'

const scienceData = computed(() => {
    return science.value?.data?.articleList || [];
})
</script>
<style scoped lang="scss">
.academic {
    width: 1200px;
    margin: auto;

    .acdemic-content {
        width: 100%;
        margin-top: 1.5rem;

        .academic-list {
            gap: 1.5rem;
            display: flex;
            justify-content: space-between;
        }

        .academic-card {
            width: calc((100% - 3 * 20px) / 4);
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            cursor: pointer;

            &:hover {
                transform: translateY(-5px);
            }

            .content {
                a {
                    text-decoration: none;
                }

                .img {
                    width: 100%;
                    height: 12rem;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 5px 5px 0 0;
                        overflow: hidden;
                    }
                }

                .info {
                    padding: .6rem;

                    .title {
                        color: #333;
                        font-size: 1rem;
                        line-height: 1.6;
                        margin-bottom: .5rem;
                        height: 3rem;
                        //超过2行省略
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }

                    .tags {
                        height: 1.8rem;
                        margin-bottom: .5rem;
                        .label {
                            color: #999;
                            font-size: 0.8rem;
                            line-height: 1.6;
                            border-radius: 5px;
                            display: inline-block;
                            font-size: .8rem;
                            padding: 2px .5rem;
                            margin-right: .3rem;
                        }
                    }

                    .meta {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: #666;
                        font-size: 1rem;

                        img {
                            width: 1.2rem;
                            height: 1.2rem;
                            vertical-align: -3px;
                            margin-right: .2rem;
                        }

                        .download {
                            color: #666;
                            text-decoration: none;
                            font-size: .9rem;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        width: 100%;

        .acdemic-content {
            margin-top: 1rem;

            .academic-list {
                display: block;

                .academic-card {
                    width: 100%;
                    margin-bottom: 1rem;

                    .content {
                        .img {
                            height: 15rem;
                        }
                    }
                }
            }
        }
    }
}
</style>